<template>
  <div style="margin-left: 5px;">
    <div>
      <div>
        <div>
          <el-row>
            <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
            <span v-html="Data.Title" style="display:inline-block"></span>
            <el-button
              @click="divvisibility(2)"
              type="text"
              style="float:right"
              v-if="!preview"
            >{{see}}</el-button>
          </el-row>
        </div>

        <div v-if="visible">
          <el-button type="text" @click="lixian=!lixian">离线模式</el-button>
          <div class="option-area" style="margin-left: 5px;" v-if="!lixian">
            <el-table :data="Data.Options" style="width: 100%">
              <el-table-column>
                <template slot-scope="scope">
                  <el-badge
                    type="primary"
                    v-bind:value="scope.row.OrderIndex"
                    v-if="scope.row.HasChecked&&(scope.row.OrderIndex>1)"
                  />
                  <el-badge
                    v-bind:value="scope.row.OrderIndex"
                    v-if="scope.row.HasChecked&&(scope.row.OrderIndex==1)"
                  ></el-badge>
                  <el-checkbox
                    v-model="scope.row.HasChecked"
                    @change="SetOrderIndex(scope.row.itemId)"
                  >{{scope.row.itemName}}</el-checkbox>
                  <el-alert v-bind:title="scope.row.memo" v-if="scope.row.memo!=''" type="info"></el-alert>
                </template>
              </el-table-column>
            </el-table>
          </div>
            <!-- 离线表格模式-->
            <div v-if="lixian">
              <table border="1px" cellspacing="0" v-if="type" style="width: 50%">
                <!-- 一列 -->
                <tr v-for="(opt,index) in Data.Options" :key="opt.itemName">
                  <td style="width: 70%">{{opt.itemName}}</td>
                  <td style="width: 30%">{{index+1}}</td>
                </tr>
              </table>
            </div>
          
        </div>
      </div>
    </div>

    <div id="editor" v-if="canEdit==true" style="margin: 5px;">
      <el-card class="box-card" style="margin-top:20px">
        <EditorComponent v-model="Data.Title" :Html="Data.Title"/>
        <div class="radius" style="border-radius:2px; height:50px"></div>

        <el-table :fit="true" :data="Data.Options" style="width: 100%">
          <el-table-column label="选项文字">
            <template slot-scope="scope">
              <div id="title-row">
                <el-input
                  size="small"
                  style="display: inline-block;"
                  v-model="scope.row.itemName"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: inline-block;margin-top: 5px;">
                <el-button
                  type="warning"
                  @click="remove(scope.row.itemId)"
                  size="mini"
                  style="display: inline-block;"
                  icon="el-icon-minus"
                  circle
                ></el-button>
                <el-button
                  type="danger"
                  @click="insert(scope.row.itemId)"
                  size="mini"
                  style="display: inline-block;"
                  icon="el-icon-plus"
                  circle
                ></el-button>
                <el-button
                  size="mini"
                  style="display: inline-block;"
                  @click="moveUp(scope.row.itemId)"
                  icon="el-icon-top"
                  circle
                ></el-button>
                <el-button
                  size="mini"
                  style="display: inline-block;"
                  @click="moveDown(scope.row.itemId)"
                  icon="el-icon-bottom"
                  circle
                ></el-button>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="说明">
            <template slot-scope="scope">
              <el-input v-model="scope.row.memo" size="small" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
        <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import RankSubject, { RankSelOption } from "./ts/RankSubject";
import OrderBy, { OrderByTypes } from "./ts/OrderByTypes";
import TBaseQuestion from "./ts/TBaseQuestion";
import DataTypeSelector from "./DataTypeSelector.vue";
import EditorComponent from "./EditorComponent.vue";
import { QuestionDataTypes, QuestionTypes } from "./ts/QuestionDataTypes";
import OrderByComponent from "./OderByComponent.vue";
import BatchAddComponent from "./BatchAddComponent.vue";
import ImageBase64Componet from "./ImageBase64Componet.vue";

@Component({
  components: {
    EditorComponent,
    DataTypeSelector,
    OrderByComponent,
    BatchAddComponent,
    ImageBase64Componet
  }
})
export default class RankComponent extends TBaseQuestion<
  RankSelOption,
  RankSubject
> {
  $name: string = "RankComponent";

  CheckedValues: Array<string> = [];

  options: RankSelOption[] = [];

  itemname = "";

  msg: string = "";
  gotMsg: string[] = [];

  
  type = true;

  @Watch("msg")
  getstr() {
    console.log(this.msg);
    this.gotMsg = this.msg.split("\n");
    this.gotMsg.forEach(element => {
      if (element != " ") {
        var opt = new RankSelOption();
        opt.itemName = element;
        this.options.push(opt);
      }
    });
    this.Data.Options = this.options;
    this.options = [];
  }
  itemNameArry() {
    this.itemname = this.getOptionText();
  }
  //清除图片
  clearpicture(id: string) {
    let opt = this.Data.Options;
    let option = opt[opt.findIndex(item => item.itemId === id)];
    option.ImageUrl = " ";
  }
  //接收图片地址
  savepicture(id: string, url: string) {
    console.log(id);
    let opt = this.Data.Options;
    let option = opt[opt.findIndex(item => item.itemId === id)];
    option.ImageUrl = url;
  }

  //显示题目内容div

  //获取options中每一项的name
  getOptionText(): string {
    let options = "";
    let n = this.Data.Options.length;
    for (let i = 0; i < n; i++) {
      if (i < n - 1) {
        options += this.Data.Options[i].itemName + "\n";
      } else {
        options += this.Data.Options[i].itemName;
      }
    }
    return options;
  }

  constructor() {
    super(RankSelOption, RankSubject);
    this.Data.QuestionType = QuestionTypes.qtSimpleRank;
    this.Data.Title = "设置题目标题";

    for (var i: number = 0; i < 5; ++i) {
      var opt = new RankSelOption();
      opt.itemName = "选项" + i;
      this.Data.Options.push(opt);
    }
  }

  mounted() {
    super.mounted();
    this.initProps();

    console.info("component mounted!");
  }
  //输入框内容改变
  inputchange() {
    this.msg = this.getOptionText();
  }
  //删除选项
  remove(str: string): void {
    super.remove(str);
    this.msg = this.getOptionText();
  }

  //插入选项
  insert(id: string): void {
    let options = this.Data.Options;
    options.splice(
      options.findIndex(item => item.itemId === id) + 1,
      0,
      this.createNewOption(RankSelOption)
    );
    this.msg = this.getOptionText();
  }
  //向上移动选项
  moveUp(id: string): void {
    super.moveUp(id);
    this.msg = this.getOptionText();
  }
  moveDown(id: string) {
    super.moveDown(id);
    this.msg = this.getOptionText();
  }

  initOptions() {
    for (var i: number = 0; i < 5; ++i) {
      var opt = new RankSelOption();
      opt.itemName = "选项" + i;
      this.Data.Options.push(opt);
    }
  }

  getQuestionData(): any {
    return this.Data;
  }

  setQuestionData(data: string) {}

  getTitle(): void {
    // console.info(Data.Title);
    // this.Data.Title;
  }

  getMaxSel(): number {
    return this.Data.Options.length;
  }

  setTitle(txt: string): void {}

  GetHtml(html: string): void {
    this.Data.Title = html;
  }

  SetOrderIndex(id: string): void {
    let options = this.Data.Options;
    var opt = options[options.findIndex(item => item.itemId === id)];
    if (opt.HasChecked) {
      opt.OrderIndex = this.GetHasCheckedNum();
    } else {
      var itemOrder = opt.OrderIndex;
      opt.OrderIndex = 0;

      for (var item of this.Data.Options) {
        if (item.HasChecked && item.OrderIndex > itemOrder) item.OrderIndex--;
      }
    }
  }
  //取得已选择的数量
  GetHasCheckedNum(): number {
    let num = 0;

    for (var item of this.Data.Options) {
      if (item.HasChecked) num++;
    }
    return num;
  }
}
</script>
 
<style>
.optionLayout {
  display: flex;
  display: -webkit-flex;
  border: 1px solid gainsboro;

  width: 100%;
  align-items: center;
  justify-content: left;
}
.setting-table td {
  text-align: center;
  vertical-align: middle;
}
table {
  width: 100%;
  font-size: 14px;
  margin-top: 5px;
}
</style>
